<template lang="pug">
.upload-body
  .upload-steps
    el-steps(align-center :active="active" finish-status="success")
      el-step(title="选择材料分类")
      el-step(title="填写材料信息")
      el-step(title="填写材料属性")
      el-step(title="选择材料关联")
  section(v-if="active == 0 && isLoading")
    category-module(@next="next(1)")
  section(v-if="active == 1")
    info-module(@next="next(2)" @prev="next(0)")
  section(v-if="active == 2")
    attr-module(@next="next(3)" @prev="next(1)")
  section(v-if="active == 3")
    related-module(@prev="next(2)")
</template>

<script>
import categoryModule from './module/category'
import infoModule from './module/info'
import attrModule from './module/attr'
import relatedModule from './module/related'
import { getMaterialDetail } from 'api'
import { mapActions } from 'vuex'
export default {
  name: 'upload',
  components: {
    categoryModule,
    infoModule,
    attrModule,
    relatedModule
  },
  data () {
    return {
      active: 0,
      isLoading: false,
      form: {}
    }
  },
  methods: {
    ...mapActions([
      'changeMaterialData'
    ]),
    next (acitve) {
      document.getElementsByClassName('view')[0].scrollTop = 0
      this.active = acitve
    },
    async init () {
      try {
        const { ResultSet } = await this.$axios.post(getMaterialDetail, { content: { materialId: this.$route.params.id } })
        let newForm = { ...ResultSet.userData.Material, ...ResultSet.userData, country: ResultSet.userData.Material.country + '' }
        let newSpec = {
          items: ResultSet.userData.items,
          prices: ResultSet.userData.table
        }
        newForm.spec = newSpec
        await this.changeMaterialData({ form: newForm })
        this.isLoading = true
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (to.params.id) vm.init()
      else vm.isLoading = true
    })
  },
  beforeRouteLeave (to, from, next) {
    this.changeMaterialData({ form: {} })
    next()
  }
}
</script>

<style lang="scss" scoped>
.upload-body {
  padding: 0 32px 16px;
  min-width: 1365px;
}
</style>